<template>
    <div id="bookPurchase">
        <Header title="图书购买信息填写"
                toPath="/personal/book"/>
        <ul class="form-list">
            <li>
                <div class="label">书&emsp;&emsp;名</div>
                <div class="right">{{ formData.bookName }}</div>
            </li>
            <li>
                <div class="label">作&emsp;&emsp;者</div>
                <div class="right">{{ formData.author }}</div>
            </li>
            <li>
                <div class="label">图书编号</div>
                <div class="right">{{ formData.bookNumber }}</div>
            </li>
            <li>
                <div class="label">购&ensp;买&ensp;人</div>
                <div class="right">{{ formData.userName }}</div>
            </li>
            <li>
                <div class="label">联系方式</div>
                <div class="right">{{ formData.phone }}</div>
            </li>
            <li>
                <div class="label">购买数量</div>
                <div class="btn">
                    <button class="num-btn"
                            @click="sub()"><img src="@/assets/images/buddhist/sub.png"></button>
                    <input v-model="count"
                           class="num-input"
                           type="number"
                           readonly>
                    <button class="num-btn"
                            @click="add()"><img src="@/assets/images/buddhist/add.png"></button>
                </div>
            </li>
            <li>
                <div class="label">价格</div>
                <div class="right">{{ formData. }}</div>
            </li>
        </ul>
        <button class="submit-btn">提交</button>
        <img src="@/assets/images/canteen/bg.png"
             class="all-bg">
    </div>
</template>

<script>
import Header from "@/view/components/header";
import BookRepo from "@/assets/repo/canteen/book";
export default {
    components: {
        Header
    },
    data()
    {
        return {
            formData: {
                author: "",
                bookName: "",
                bookNumber: "",
                useType: "-1",
                phone: "",
                userName: "",
                price: "",
				count:0
				
            }
        };
    },
    mounted()
    {
        this.getBuyList();
    },
    methods:{
        getBuyList(){
            this.query = {
                organizationId: this.organizationId,
                wxOpenId: this.openid,
                recordType: this.recordType,
                recordStatus: this.recordStatus
            };
            let param = {
                "bookId": "e09a8bc9ec2f44fbad1d7b42a08e7890",
                "codeType": "1",
                "organizationId": "38e7dbe8e9984859a705ecb1e3772b28",
                "wxOpenId": "test1255288"
            };
            this.xUtil.open();
            BookRepo.buyBooks(param).then(response =>
            {
                this.formData = response;
                this.formData.push.apply(this.formData, response.list);
            }).catch(() =>
            {
                this.xUtil.close();
            });
        },
		// 减
		sub:function(){
			let that=this;
			if (that.count <= 0) {
               alert("不能少了")
            }else {
              that.count -= 1;
			}
			 console.log('减');
		},
		// 加
		add:function(){
			that.count ++;
			console.log('加');
		}
		
    }
};
</script>

<style lang="less" scoped>
#bookPurchase{
    position: relative;
    width: 100%;
    .all-bg{
        height: 205px;
        width: auto;
        margin-top: 150px;
    }
    .form-list{
        width: 650px;
        background-color: #fff;
        margin: 10px 30px 0;
        box-shadow: 0 0 30px #eee;
        border-radius: 8px;
        padding: 0 20px;
        li{
            position: relative;
            height: 95px;
            line-height: 95px;
            width: 100%;
            font-size: 0;
            border-bottom: 1px solid #eee;
            .label{
                display: inline-block;
                width: 30%;
                font-size: 28px;
                color: #666666;
            }
            .right{
                display: inline-block;
                text-align: right;
                font-size: 28px;
                color: #333;
                width: 70%;
                vertical-align: top;
            }
            input{
                width: 70%;
                height: 100%;
                line-height: 95px;
                border:none;
                outline: none;
                font-size: 28px;
                color: #333;
                text-align: right;
                -webkit-appearance:none;
            }
            &:last-child{
                border-bottom: none;
            }
            .btn{
                display: inline-block;
                width: 70%;
                text-align: right;
                line-height: 0;
                font-size: 28px;
                .num-btn{
                    height: 32px;
                    width:32px;
                    border-radius: 50%;
                    border: none;
                    outline: none;
                    margin-top: 24px;
                    vertical-align: top;
                    img{
                        height: 100%;
                        width: 100%;
                    }
                }
                .num-input{
                    width: 60px;
                    height: 50px;
                    margin: 15px 0;
                    border: none;
                    line-height:normal;
                    font-size: 32px;
                    text-align: center;
                    outline: none;
                }
            }
        }
    }
    .submit-btn{
        width: 400px;
        height: 88px;
        margin: 40px 175px;
        font-size: 28px;
        color: #fff;
        border:none;
        outline: none;
        padding: 0;
        background:url("../../../../assets/images/service/visit/block1.png");
        background-size: cover;
    }
}
</style>
